body {
    background-color: whitesmoke;
    font-family: 'Cabin', sans-serif;
    margin: 0px;
}

.navigation {
    width: 100%;
    background-color: white;
    height: 64px;
    position: fixed;
    z-index: 99;
    padding-top: 5px;
}

.logo {
    vertical-align: top;
    float: left;
    height: 100%;
    padding-left: 24px;
}

.navigation p {
    font-size: 32px;
    margin: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 80px;
}

.navigation p strong {
    color: #0A4958;
}

.navigation p {
    color: lightgray;
    font-weight: normal;
}

.navigation ul, 
.small-screen {
    display: inline-flex;
    float: right;
    list-style-type: none;
    padding-right: 32px;
}

.small-screen {
    position: absolute;
}

.navigation li {
    padding-left: 16px;
}

@media screen and (min-width: 200px) and (max-width: 585px) {
    .navigation p,
    .large-screen {
        visibility: hidden;
    }
}

@media screen and (min-width: 586px) {
    .small-screen {
        visibility: hidden;
    }
}

h2 {
    font-size: 50px;
    font-weight: 900;
    color:#fff;
}

h3 {
    font-size: 30px;
    font-weight: normal;
    color: white;
}
#banner {
    background-color:#0A4958;
    position: relative;
    top: 70px;
    display: flex;    
}

#banner img {
    width: 60%;
    padding: 32px 24px;
}

#banner .heading {
    position: relative;
    top: 15%;
    width: 65%;
    padding-left: 24px;
}

.heading h3 {
    color: white;
}

button {
    background-color: #F6E7D2;
    padding: 8px 40px;
    font-size: large;
    font-weight: 900;
    color: #0A4958;
    width: 100%;
}

@media only screen and (min-width: 200px) and (max-width: 1100px) {
    #banner {
        flex-direction: column;
    }
    #banner img {
        width: 90%;
    }
    #banner .heading {
        width: 90%;
        padding: 32px 24px;
    }
}

 /*CSS for Information section*/

 #information {
     position: relative;
     top: 70px;
 }

 #information .main-container {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: row;
}

#information .left-container {
    display: flex;
    flex-direction: column;
    width: 60%;
    padding: 32px 24px;
}

.left-container img {
    width: 100%;
}

#information .right-container {
    display: flex;
    flex-direction: column;
    width: 40%;
    background-color: lightgrey;
}

.right-container img {
    width: 100%;
}

.info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 16px;
    margin-top: 10px;
}

.info-image-box {
    width: 35%;
    height: auto;
}

.info-text-box {
    width: 65%;
    height: auto;
    padding-left: 16px;
}

#information h2, h3 {
    color: #0A4958;
}

@media only screen and (max-width: 800px) {
    #information .main-container {
        display: flex;
        flex-wrap: wrap;
    }

    #information .left-container {
        display: flex;
        width: 100%;
    }

    #information .right-container {
        display: flex;
        width: 100%;
    }
}

@media only screen and (min-width:551px) {
    img#mob {
        display: none;
    }
}

@media only screen and (max-width: 550px) {
    #information .right-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .info {        
        display: flex;
        flex-direction: column;
        padding: 16px 16px;
        margin-top: 0px;
    }

    img#main {
        visibility: hidden;
        height: 0px;
    }

    .img#mob {
        visibility: visible;
        width: 100%;
    }

    .info-image-box,
    .info-text-box {
        width: 100%;
    }
}

 /*CSS for Start Learning section*/

 #start-learning {
     background-color: whitesmoke;
     position: relative;
 }

 #start-learning h2 {
     color: #0A4958;
     text-align: center;
     padding-top: 32px;
 }

 #start-learning .container {
     display: flex;
     justify-content: space-between;
     justify-items: center;
     flex-wrap: wrap;
     padding: 32px 72px;
 }

 #start-learning .item {
     background-color: #fff;
     width: 30%;
     margin-bottom: 32px;
 }

 #start-learning img {
     height: auto;
     width: 100%;
 }

 #start-learning h4 {
     color: #0A4958;
     padding-top: 10px;
     padding-left: 16px;
     font-size: larger;
 }

 #start-learning p {
     padding: 0px 16px 0px 16px;
 }
 
 @media only screen and (max-width: 580px) {
     #start-learning .item {
         width: 100%;
     }
 }

 /*CSS for Thesis section*/

 #thesis {
    position: relative;
    background-color: white;
}

#thesis h2 {
    color: #0A4958;
    text-align: center;
    padding-top: 32px;
    margin-bottom: 0px;
}

#thesis .main-container {
   width: 100%;
   display: flex;
   flex-direction: row;
}

#thesis .left-container {
   display: flex;
   flex-direction: column;
   width: 60%;
   padding: 32px 24px;
}

video {
    width: 100%;
}

#thesis .right-container {
    display: flex;
    flex-direction: column;
    width: 40%;
}

#thesis .info {
    margin-top: 20px;
}

#thesis h3 {
    margin-bottom: 0px;
}

@media only screen and (max-width: 700px) {
    #thesis .right-container {
        display: none;
    }

    #thesis .left-container {
        width: 100%;
    }
}

/*CSS for Footer section*/

footer p {
    padding: 16px 24px;
}

footer ul {
    list-style-type: none;
    float: right;
    display: inline-flex;
    position: relative;
    bottom: 70px;
    padding-right: 24px;
}

footer li {
    padding-left: 16px;
}

footer {
    height:;
}